<!-- 免费课程 -->
<template>
  <div class="container">
    <Nav></Nav>
    <div class="notice_content">
      <div class="freePage">
        <div class="free_audio">
          <div class="audio"><iframe :src="links" allow="autoplay" frameborder="0" allowfullscreen="true" width="100%" height="100%" ></iframe></div>
          <div class="audio_title">
            {{description}}
          </div>
          <div class="audio_intro">
            {{video_name}}
          </div>
        </div>
        <div class="free_list">
          <nuxt-link
            tag="a"
            :href="item.link"
            :to="'/freeLesson/' + item.id + '/' + item.is_limit_play"
            :class="ids == item.id ? 'active' : ''"
            v-for="(item, index) of videoList"
            :key="index">
            <p><img v-if="item.is_limit_play" src="../../../assets/img/lock.png" alt="">{{item.video_name}}</p>
            <p>{{item.view_count}}人观看</p>
          </nuxt-link>
        </div>
        <!-- 分页 -->
        <div class="article_page" v-if="pageNum > 1">
          <div class="page_num">
            <li
              v-for="(item, index) of pageNum"
              :key="index"
              @click="pageSort(index)">
              <p>{{item}}</p>
              <p :class="pagestatus === index ? 'show' : 'hidden'"></p>
            </li>
          </div>
          <div class="page_button">
            <li @click="Sleft()"><img src="../../../assets/img/left.png" alt=""></li>
            <li @click="Sright()"><img src="../../../assets/img/right.png" alt=""></li>
          </div>
        </div>
        <!-- 分页 -->
      </div>
      <!-- <Notice></Notice> -->
      <!-- 右侧 -->
      <div class="notice_show">
        <div
          class="course_infor">
          <nuxt-link class="course_list1" v-for="(item, index) of videoLists"
          :key="index"
          tag="div"
          :to="'/freelesson/' + item.id + '/' + item.is_limit_play">
            <div class="course_img">
              <img :src="item.vide_img" alt="">
            </div>
            <div class="course_of1">
              <li>{{item.video_name}}</li>
              <li>观看次数：{{item.view_count}}次</li>
            </div>
          </nuxt-link>
        </div>
        <div
          class="show_img"
          v-for="(item, index) of eliveList"
          :key="index"
          v-show="item.is_now_live === 1">
          <li><img :src="item.img" alt=""></li>
          <li>{{item.name}}</li>
          <li>
            <p>{{item.teacher_name}}</p>
            <p>{{item.live_times}}</p>
            <p v-if="!item.url">即将开始</p>
            <p v-else><a :href="item.url" target="_blank" rel="noopener noreferrer">点击播放</a></p>
          </li>
        </div>
        <div class="get_notes">
          <li>关注公众号免费学课程</li>
          <li><img src="../../../assets/img/serve.jpg" alt=""></li>
        </div>
      </div>
      <!-- 右侧 -->
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
import Nav from '../../../components/Nav/nav'
import Bottom from '../../../components/Bottom/bottom'
export default {
  head () {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
      ],
      title: '山西公务员培训免费课程、免费视频-培训讲师-岸上教育官网',
      meta:[{
        hid: 'description',
        name: 'description',
        content: '岸上教育为您提供公务员免费课程，免费资料，免费视频等，这里汇聚专业的培训讲师，为您的备考保驾护航，更多优秀讲师，尽在岸上教育'
      },{
        hid: 'Keywords',
        name: 'Keywords',
        content: '山西公务员免费课程，山西公务员考试免费视频，山西公务员考试培训讲师'
      }]
    }
  },
  name: 'freeLesson',
  data () {
    return {
      // 视频信息
      videoList: [],
      // 视频链接
      links: '',
      plays: 1,
      ids: 0,
      // 视频描述
      description: '',
      // 视频名称
      video_name: '',
      show: true,
      ins: 0,
      // 分页
      pageNum: 0,
      pagestatus: 0,
      page:1,
      page_count:10,
      navType: '',
      // 置顶信息
      stickInfo: [],
      // 课程列表
      classList: [],
      videoLists: [],
      // 一直播
      eliveList: [],
      // 右侧列表参数
      catId: 0
    }
  },

  created () {
  },

  mounted () {
    this.description = this.$route.query.description
    this.videoname = this.$route.query.videoname
    // this.links = this.$route.query.link
    this.ids = this.$route.params.id
    this.plays = this.$route.params.play
    this.pagestatus = Number(localStorage.getItem('pagestatus'))
    this.page = Number(localStorage.getItem('page'))
    if (this.pagestatus == null) {
      this.pagestatus = 0
    }
    if (this.page == null || this.page == 0) {
      this.page = 1
    }
    this.getVideo()
    this.videoStick()
    this.elive()
  },

  components: {
    Nav,
    Bottom
  },

  computed: {},

  methods: {
    // 外链--e直播
    elive () {
      this.$http.post('/elive/getLiveLists', {
        page: 1,
        page_count: 3
      }).then((res) => {
        this.eliveList = res.data.data
        this.eliveList.map((r, index) => {
          this.eliveList[index].live_times = r.live_time.split(' ')[0]
        })
      })
    },
    // 视频列表
    videoStick () {
      this.$http.post('/link/getVideolists', {
        // is_top: 1,
        page: 1,
        page_count: 3
      }).then((res) => {
        this.videoLists = res.data.data
      })
    },
    // 分页右侧
    Sleft () {
      if (this.page !== 1) {
        this.page -= 1
        this.pagestatus = this.page - 1
        localStorage.setItem('pagestatus', this.pagestatus)
        localStorage.setItem('page', this.page)
        this.getVideo()
      }
    },
    // 分页左侧
    Sright () {
      if (this.page !== this.pageNum) {
        this.page += 1
        this.pagestatus = this.page - 1
        localStorage.setItem('pagestatus', this.pagestatus)
        localStorage.setItem('page', this.page)
        this.getVideo()
      }
    },
    // 分页点击
    pageSort (index) {
      this.page = index + 1
      this.pagestatus = index
      localStorage.setItem('pagestatus', this.pagestatus)
      localStorage.setItem('page', this.page)
      this.getVideo()
    },
    // 更新视频次数
    updateVideo (id) {
      this.$http.post('/link/updateVideoView', {
        video_id: id
      }).then((res) => {
      })
    },
    // 免费视频
    getVideo () {
      var tokens = localStorage.getItem('token')
      this.$http.post('/link/getVideolists', {
        // eslint-disable-next-line
        token: tokens ? tokens : '',
        page: this.page,
        page_count: this.page_count
      }).then((res) => {
        this.videoList = res.data.data
        this.pageNum = 0
        this.pageNum = res.data.all_num
        if (this.pageNum > 0) {
          this.pageNum = Math.ceil(Number(this.pageNum) / Number(this.page_count))
        }
        this.videoList.map((res) => {
          if (this.ids == res.id) {
            this.description = res.description
            this.video_name = res.video_name
            this.links = res.link
          }
        })
        if (this.plays == 1) {
          this.$alert('<strong><i>请先登录</i></strong>', '提示', {
            dangerouslyUseHTMLString: true
          })
          // alert('请先登录')
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.notice_show{
  width: 286px;
  height: auto;
}
.office_show{
  width: 286px;
  height: 323px;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0px 12px;
}
.office_show .show_title{
  width: 100%;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 12px;
}
.office_show .show_title_list{
  overflow: hidden;
  height: 255px;
}
.show_title_list li{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 8px;
  height:44px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  cursor: pointer;
}
.show_title_list li p:first-child{
  width: 204px;
  height: 44px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.show_title_list li:hover{
  color: rgba(24, 144, 255, 1);
}

.show_title_list a{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 8px;
  height:44px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  cursor: pointer;
  text-decoration: none;
}
.show_title_list a p:first-child{
  width: 204px;
  height: 44px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.show_title_list a:hover{
  color: rgba(24, 144, 255, 1);
}
.show_img{
  width: 286px;
  height: 366px;
  margin-top: 30px;
  background: #ffffff;
}
.show_img li{
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  cursor: pointer;
}
.show_img li:hover{
  color: rgba(24, 144, 255, 1);
}
.show_img li img{
  width: 286px;
  height: 286px;
}
.show_img li:nth-child(2){
  margin-top: 12px;
  box-sizing: border-box;
  padding-left: 12px;
}
.show_img li:last-child{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
  box-sizing: border-box;
  padding-left: 12px;
}
.show_img li:last-child p:nth-child(2){
  margin-left: 24px;
}
.show_img li:last-child p:nth-child(3){
  margin-left: 54px;
  font-size: 12px;
  background: rgba(24, 144, 255, 1);
  color: #ffffff;
  border-radius: 10px;
  padding: 0px 10px;
}
.show_img li:last-child p:nth-child(3) a{
  color: #ffffff;
  text-decoration: none;
}
.get_notes{
  width: 286px;
  height: 247px;
  background: #ffffff;
  margin-top: 30px;
  box-sizing: border-box;
  padding: 16px;
}
.get_notes li:first-child{
  width: 100%;
  text-align: center;
}
.get_notes li:last-child{
  width: 100%;
  text-align: center;
  margin-top:30px;
}
.get_notes li img{
  width: 118px;
  height: 118px;
}
.course_infor{
  width: 286px;
  height: auto;
  cursor: pointer;
}
.course_list{
  width: 286px;
  height: auto;
  background:rgba(255,255,255,1);
  margin-top: 20px;
  padding-bottom: 10px;
}
.course_list:first-child{
  margin-top: 0px;
}
.course_list1{
  width: 286px;
  height: auto;
  background:rgba(255,255,255,1);
  margin-top: 20px;
}
.course_list1:first-child{
  margin-top: 0px;
}
.course_list1 .course_img{
  height: 286px;
}
.course_list1 .course_img img{
  height: 286px;
}
.course_of{
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_of li:first-child{
  // height:22px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  margin-top: 12px;
}
.course_of li:last-child{
  line-height: 25px;
}
// 12312
.course_of1{
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_of1 li:first-child{
  // height: 22px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  margin-top: 12px;
  flex-wrap: wrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // display: -webkit-box;
  // -webkit-line-clamp: 1;
  // line-clamp: 1;
  // -webkit-box-orient: vertical;
}
.course_of1 li:last-child{
  line-height: 25px;
  padding-bottom: 10px;
}
// 123
.course_tea{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_tea li{
  margin-left: 20px;
}
.course_tea li:first-child{
  margin-left: 0px;
}
.course_tea li p:last-child{
  margin-top: 4px;
  text-align: center;
}
.course_tea li p img{
  width:50px;
  height:50px;
  border-radius: 50%;
}
.course_img{
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.course_img img{
  width: 286px;
  height: 160px;
}
// 分页
.article_page{
  background: #fff;
  box-sizing: border-box;
  padding: 60px 30px 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.page_num{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.page_num li{
  cursor: pointer;
  margin-left: 20px;
  width: 30px;
  height: 50px;
  line-height: 25px;
  text-align: center;
  font-size:18px;
  font-weight:bold;
}
.page_num li:hover p:first-child{
  color: rgba(24, 144, 255, 1);
  // color: red;
}
.page_num li:first-child{
  margin-left:0px;
}
.page_num li p:last-child{
  width:7px;
  height:7px;
  border:2px solid rgba(24,144,255,1);
  border-radius: 50%;
  margin:  0 auto;
}
.page_num li p.show{
  display: block;
}
.page_num li p.hidden{
  display: none;
}
.page_button{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.page_button li{
  margin-left: 30px;
  cursor: pointer;
}
.page_button li:first-child{
  margin-left: 0px;
}
.page_button li img{
  width: 50px;
  height: 50px;
}
// 分页
.container{
  min-width: 1200px;
  background: rgb(234, 238, 239);
}
.notice_content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1200px;
  margin: 40px auto 80px;
}
.freePage{
  width: 895px;
  height: auto;
  // background: #ffffff;
  overflow: hidden;
}
.free_audio{
  width: 895px;
  height: auto;
  box-sizing: border-box;
  padding: 30px;
  background: #ffffff;
}
.audio{
  width:835px;
  height:470px;
  background:rgba(216,216,216,1);
  // border-radius:12px;
}
.audio_title{
  width: 100%;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:25px;
  letter-spacing:1px;
  margin-top: 20px;
}
.audio_intro{
  font-size:14px;
  color:rgba(136,136,136,1);
  line-height:26px;
  margin-top: 12px;
}
.free_list{
  width: 895px;
  height: auto;
  background: #ffffff;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 30px;
  // overflow: hidden;
}
.free_list a{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
  cursor: pointer;
  text-decoration: none;
}
.free_list a.active{
  color: rgba(24, 144, 255, 1);
}
.free_list a:hover{
  color: rgba(24, 144, 255, 1);
}
.free_list a p img{
  width: 10px;
  height: 13px;
  margin-right: 10px;
}
</style>
